﻿@model CatalogPagingFilteringModel.SpecificationFilterModel
@using Nop.Web.Models.Catalog;
@{
    var notFilteredItemsGroups = Model.NotFilteredItems.GroupBy(x => x.SpecificationAttributeName);
}
@if (Model.Enabled)
{
    if (Model.AlreadyFilteredItems.Count > 0)
    {
        <div class="product-filters product-spec-remove-panel">
            <div class="already-filtered-items">
                @*<div class="filter-title">
                        @T("Filtering.SpecificationFilter.CurrentlyFilteredBy")
                    </div>*@
                @foreach (var item in Model.AlreadyFilteredItems)
                {
                    var specificationAttrName = item.SpecificationAttributeName;
                    var colorClass = (specificationAttrName.ToLower().Equals("color") || specificationAttrName.ToLower().Equals("colors")) ? "color-list" : string.Empty;
                    if (!string.IsNullOrEmpty(colorClass))
                    {
                        var saoValues = item.SpecificationAttributeOptionName.Split('-');
                        var saoName = saoValues[0];
                        var color = saoValues.Length > 1 ? saoValues[1] : saoName;
                        <span class="item badge @colorClass" title="@saoName">
                            <strong>@(item.SpecificationAttributeName):</strong>
                            <span style="background:@color;">@saoName</span>
                        </span>
                    }
                    else
                    {
                        <span class="item badge">
                            <strong>@(item.SpecificationAttributeName):</strong> <span>@item.SpecificationAttributeOptionName </span>
                        </span>
                    }
                }
            </div>
            <div class="btn btn-default btn-xs remove-filter">
                <a href="@Model.RemoveFilterUrl">@T("Filtering.SpecificationFilter.Remove")</a>
            </div>
        </div>
    }
    <div class="product-filters product-spec-filter">
        @*<div class="filter-title">
                <strong>@T("Filtering.SpecificationFilter")</strong>
            </div>*@
        <div class="filter-content">
            @if (Model.NotFilteredItems.Count > 0)
            {
                var count = notFilteredItemsGroups.Count();
                var topSpecItemsGroups = notFilteredItemsGroups.Take(3);
                <div class="available-items clearfix">

                    @foreach (var group in topSpecItemsGroups)
                    {
                        var groupList = group.ToList();
                        var specificationAttrName = @groupList[0].SpecificationAttributeName;
                        // special handler only for color list
                        var colorClass = (specificationAttrName.ToLower().Equals("color") || specificationAttrName.ToLower().Equals("colors")) ? "color-list" : string.Empty;
                        <ul class="group list-unstyled @colorClass">

                            <li class="title">
                                <strong>@specificationAttrName</strong>
                            </li>

                            @foreach (var spec in groupList)
                            {
                                if (!string.IsNullOrEmpty(colorClass))
                                {
                                    var saoValues = spec.SpecificationAttributeOptionName.Split('-');
                                    var saoName = saoValues[0];
                                    var color = saoValues.Length > 1 ? saoValues[1] : saoName;
                                    <li class="item  pa_@(color.Substring(1))" style="background:@color;" title="@saoName">
                                        <a href="@spec.FilterUrl">@saoName</a>
                                    </li>
                                }
                                else
                                {
                                    <li class="item">
                                        <a href="@spec.FilterUrl">@spec.SpecificationAttributeOptionName</a>
                                    </li>
                                }
                            }
                        </ul>
                    }
                </div>
                if (count > 3)
                {
                    var extendedSpecItemsGroups = notFilteredItemsGroups.Skip(3).Take(count - 3);
                    <div class="available-items-extended clearfix">
                        <span id="more-filters" class="btn btn-primary btn-xs more-filters">More Filters</span>
                        @foreach (var group in extendedSpecItemsGroups)
                        {
                            var groupList = group.ToList();

                            <ul class="group list-unstyled">
                                <li class="title">
                                    <strong>@groupList[0].SpecificationAttributeName</strong>
                                </li>

                                @foreach (var spec in groupList)
                                {
                                    <li class="item">
                                        <a href="@spec.FilterUrl">@spec.SpecificationAttributeOptionName</a>
                                    </li>
                                }
                            </ul>
                        }
                    </div>
                    <script>
                        seajs.use("jquery", function ($) {
                            $("#more-filters").on("click", function () {
                                $this = $(this);
                                if ($this.data("extended")) {
                                    $this.nextAll(".group").slideUp('fast', function () {
                                        $this.data("extended", false);
                                    });
                                } else {
                                    $this.nextAll(".group").slideDown('fast', function () {
                                        $this.data("extended", true);
                                    });
                                }

                            });
                        });
                    </script>
                }

            }
        </div>
    </div>
}